<template>
  <div class="add-payslip-forth">
    <div class="content-con">
      <a-result status="success" title="工资条发送成功">
        <template v-slot:extra>
          <a-row type="flex">
            <a-col class="col-left">
              <!-- <img class="img" src="@/assets/img/payslip/finsh.png" alt="失败" /> -->
              <xq-icon type="icon-wancheng1" class="primary_color w32" style="display: block; font-size: 30px" />
              <a-divider class="img-v" type="vertical" />
              <!-- <img class="img" src="@/assets/img/payslip/finsh.png" alt="失败" /> -->
              <xq-icon type="icon-wancheng1" class="primary_color w32" style="display: block; font-size: 30px" />
            </a-col>
            <a-col class="full" style="text-align: left">
              <a-row class="content-con-text mg_b24">
                <a-col class="mg_b12 round"><strong>发放工资条</strong></a-col>
                <a-col class="sub_tit"> 员工可以直接打开微信服务号-服务平台,点击我的工资条进行查看 </a-col>
              </a-row>
              <a-row class="content-con-text">
                <a-col class="mg_b12 round">
                  <strong> 发送完成 <span class="primary"> 100%</span> </strong>
                </a-col>
                <a-col class="sub_tit">
                  发放共
                  <span class="primary mg_l4 mg_r4">
                    {{ $route.query.sendCount }}
                  </span>
                  条微信通知
                  <span class="primary mg_l4 mg_r4">0</span>
                  条短信通知
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </template>
      </a-result>
      <a-button type="primary" @click="goDetail">查看发放详情 </a-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "AddPayslipForth",

  methods: {
    // 查看详情
    goDetail() {
      this.$router.push({
        path: "/wages/payslip-detail",
        query: {
          ...this.$route.query
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.add-payslip-forth {
  padding: 24px;
  .content-con {
    text-align: center;
    padding: 24px 162px;
    .title {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 12px;
    }
    .content-con-text {
      padding: 24px;
      background: rgba(250, 250, 250, 1);
      border: 1px solid rgba(241, 241, 241, 1);
      border-radius: 4px;
    }
    .col-left {
      padding: 24px;
      .img {
        display: block;
        width: 32px;
        height: 32px;
      }
      .img-v {
        margin: 24px 0;
        height: 60px;
      }
    }
    .round {
      width: 100%;
      &::after {
        content: "";
        position: absolute;
        left: -12px;
        top: 6px;
        border-radius: 100%;
        border: 2px solid var(--primary);
        width: 8px;
        height: 8px;
      }
    }
  }
}
</style>
